<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.yzk.auction.utils.PageModel" %>
<%--使用taglib引入标签--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/8/23
  Time: 12:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>商品分类</title>
	<link rel="stylesheet" type="text/css" href="css/show1.css"/>

</head>
<body onload="countTime()">
	<!-- 顶部 -->
	<div class="header">
		<div class="header_l">
			<a href="#">首页</a>
		</div>
		<div class="header_r">
			<a href="#">个人中心</a>
		</div>
		<div class="cen">
			<span class="web-font">园中葵拍卖网</span>
		</div>
	</div>
	<!-- 	中间字体及logo -->
	<div class="cen1">
		<div class="cen1_l">
			<strong>为您展示商品</strong>
		</div>
		<div class="cen1_2">
		</div>

	</div>
	<!-- 商品展示 -->
	<div class="main">
		<c:forEach items="${pageModel1.pageData}" var="goods">
			<div class="main1">
				<a cursor="pointer" href="/homePage?method=comm_datils&goods_id=${goods.goods_id}" target="_blank" >
					<img src="${goods.goods_picture}">
					<span style="">${goods.goods_name}</span><br>
				</a>
				<span style="height: 30px; text-align: center;">
					<span style="color: #999999; font-size: 13px; " id="jg">当前价格:</span>
					<span style="color: red; font-size: 18px; height: 20px;">${goods.end_price}</span>
				</span><br>

				<span id="start">
					${goods.start_time}
				</span>
				<span id="end">
					${goods.end_time}
				</span>

				<!-- 显示时间 -->
				<div  id="timer">
					<div>
						<span >起拍时间：</span><span style="color: black"><fmt:formatDate value="${goods.start_time}" pattern="YYYY-MM-dd hh:mm:ss"></fmt:formatDate></span><br>
						<span >
                    </span><span >截止时间：<fmt:formatDate  value="${goods.end_time}" pattern="YYYY-MM-dd hh:mm:ss"></fmt:formatDate>
							<br>
					</div>
				</div>
				</span><br>
				<!-- 出价次数 -->
				<span class="count" id="count">
					<span id="count1">${goods.auction_times}</span><br>
					<span>次出价</span>
				</span>

				<%
					SimpleDateFormat sdf = new SimpleDateFormat("YYYY-MM-dd hh:mm:ss");
					String now = sdf.format(new Date());
					session.setAttribute("time_compare",now);
				%>
				<c:choose>
					<c:when test="${goods.end_time le time_compare}">
						<c:if test="${goods.auction_times==0}">

								<p class="web-font1 lp">流拍</p>
						</c:if>
						<c:if test="${goods.auction_times>0}">

								<p class="web-font1 lp">已完成</p>

						</c:if>
					</c:when>
					<c:when test="${goods.start_time gt time_compare}">

							<p class="web-font1 jp" >未开始</p>

					</c:when>
					<c:otherwise>

							<p class="web-font1 jp" >竞拍中</p>

					</c:otherwise>
				</c:choose>
			</div>
		</c:forEach>
		<!-- 分页组件 -->
		<ul class="page">
			<li><a href="homePage?method=homePage_like&p=1">首页</a></li>
			<li><a href="homePage?method=homePage_like&p=${pageModel1.hasPreviousPage?pageModel1.page-1:1 }">上页</a></li>
			<c:forEach begin="1" end="${pageModel1.totalPages }" var="pno" step="1">
				<li ${pno==pageModel1.page?"class='active'":"" }>
					<a href="homePage?method=homePage_like&p=${pno }">${pno }</a>
				</li>
			</c:forEach>
			<li><a href="homePage?method=homePage_like&p=${pageModel1.hasNextPage?pageModel1.page+1:pageModel1.totalPages }">下页</a></li>
			<li><a href="homePage?method=homePage_like&p=${pageModel1.totalPages }">尾页</a></li>
		</ul>
	</div>
	<br><br><br>
	<!-- 底部样式 -->
	<div class="foot">
		<ul>
			<li><img src="img/logo1.png" >如实描述承诺</li>
			<li><img src="img/logo2.png" >保证金保障</li>
			<li><img src="img/logo3.png" >售后服务保障</li>
		</ul>
	</div>
	<div class="bo">
		<div class="bo_l">
			<h5>拍卖保障</h5>
			<ul>
				<li>如实描述</li>
				<li>成交必买</li>
				<li>鉴定证书</li>
				<li>艺术家授权</li>
			</ul>
		</div>
		<div class="bo_c">
			<h5>支付帮助</h5>
			<ul>
				<li>付款须知</li>
				<li>大额支付</li>
				<li>价格保障</li>
				<li>其他方式</li>

			</ul>
		</div>
		<div class="bo_r">
			<h5>机构支持</h5>
			<ul>
				<li>入驻标准</li>
				<li>资费标准</li>
				<li>机构中心</li>
				<li>艺术家授权</li>
			</ul>
		</div>
	</div>
	<div class="bottom">
		copyright @园中葵 2020
	</div>
</body>
<script type="text/javascript">
	var oBox = document.getElementById('timer');
	//竞拍中以及即将上线
	var jp = document.getElementById('jp');
	//拍卖截止后
	var cj = document.getElementById('cj');
	//出价次数样式
	var co = document.getElementById('count');
	var jg = document.getElementById('jg');
	var start1 = document.getElementById('start');
	var end1 = document.getElementById('end');

	function countTime() {
		//获取当前时间
		var date = new Date();
		var now = date.getTime();
		//设置截止时间
		var str=end1.innerText;
		//设置起拍时间
		var str1=start1.innerText;
		//获取截止时间
		var endDate = new Date(str);
		var end = endDate.getTime();
		//获取开始时间
		var startDate = new Date(str1);
		var start = startDate.getTime();

		//定义竞拍出价次数
		var count1 = document.getElementById('count1');
		var count1 = count1.innerText;


		var d = document.getElementById("_d");
		var h = document.getElementById("_h");
		var m = document.getElementById("_m");
		var s = document.getElementById("_s");

		//开拍时间和当前时间差
		var rightTime = start - now;
		//时间差
		var leftTime = end-now;
		//定义变量 d,h,m,s保存倒计时的时间
		var d1,h1,m1,s1;
		if (leftTime>0 &&rightTime<=0) {
			d1 = Math.floor(leftTime/1000/60/60/24);
			h1 = Math.floor(leftTime/1000/60/60%24);
			m1 = Math.floor(leftTime/1000/60%60);
			s1 = Math.floor(leftTime/1000%60);

			d.innerHTML ="距拍卖结束：" +d1+"天";
			h.innerHTML = h1+"时";
			m.innerHTML = m1+"分";
			s.innerHTML = s1+"秒";
			jp.innerHTML = "竞拍中";
			jp.style.backgroundColor='red';
		}
		else if (rightTime>0 &&leftTime>0) {
			d1 = Math.floor(rightTime/1000/60/60/24);
			h1 = Math.floor(rightTime/1000/60/60%24);
			m1 = Math.floor(rightTime/1000/60%60);
			s1 = Math.floor(rightTime/1000%60);

			d.innerHTML ="据拍卖开始：" +d1+"天";
			h.innerHTML = h1+"时";
			m.innerHTML = m1+"分";
			s.innerHTML = s1+"秒";
			jp.innerHTML = "即将上线";
			jp.style.backgroundColor='blue';
		}
		else {
			if(count1==0)
			{
				jp.style.display='none';
				cj.style.display='block';
				d.innerHTML = "拍";
				h.innerHTML = "卖";
				m.innerHTML = "结";
				s.innerHTML = "束";
				cj.innerHTML="流拍";
				co.style.backgroundColor='#999999';
				jg.innerHTML="最终价格:"
			}else{
				jp.style.display='none';
				cj.style.display='block';
				d.innerHTML = "拍";
				h.innerHTML = "卖";
				m.innerHTML = "结";
				s.innerHTML = "束";
				co.style.backgroundColor='#999999';
				jg.innerHTML="最终价格:"
			}

		}
		//递归每秒调用countTime方法，显示动态时间效果
		setTimeout(countTime,1000);
	}
</script>
</html>
